import React from 'react';
import { browserHistory } from 'react-router';
import { Modal, Button, Input } from 'antd';
const { TextArea } = Input;

import * as loginActions from './../../actions/frontEnd/loginAction';
import * as homeActions from './../../actions/frontEnd/homeAction';

export default class Sidebar extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        myProfile: {},
        totalAmount: 0,
        totalNum: 0,
        imageUrl: "",
        content: "",
        showFeedback: false,
        shoppingCartList: [],
        loading: false,
        cartIsEmpty: false
      };
    }
    componentDidMount(){
      var that = this;
      if(sessionStorage.getItem("username") != null){
        loginActions.findProfileById(this);
        homeActions.findShoppingCartList(this, {pageNumber: 1, pageSize: 1000});
      }
      window.onresize = function () {
        var top = (parseInt($("#iBar").height()) / 2) - 190;
        var marginTop = (window.innerHeight - 210) + "px";
        
        $("#ibar_loginbox").css({"top": top});
        $(".divFeekbook").css({"margin-top": marginTop});
      }
      window.onresize();
      //显示图标提示信息
      $("#iBar").find("li").hover(function(e) {
          $(this).addClass("on");
      }, function(e) {
          $(this).removeClass("on");
      })

      //显示和隐藏购物车
      $("#ibar_cart").click(function(e) {
          var left = $(".ibar_sub_panel").css("left");
          if (left == '0px') {
              $(".ibar_sub_panel").animate({left: "-287px"},() => {
                that.findShoppingCartList();
              });
          } else {
              $(".ibar_sub_panel").animate({left: "0"});
          }
          e.stopPropagation();
      })
      //显示头像浮动层
      $("#ibar_avatar,#ibar_loginbox").hover(function() {
          var top = (parseInt($("#iBar").height()) / 2) - 190;
          $("#ibar_loginbox").attr("is-hover", 1);
          $("#ibar_loginbox").css({"top": top, "left": "-287px"});
      }, function() {
          $("#ibar_loginbox").attr("is-hover", 0);
          setTimeout(that.hideLoginbox, 100);
      })
    }
    hideLoginbox() {
        var is_hover = $("#ibar_loginbox").attr("is-hover");
        if (is_hover != 1) {
            $("#ibar_loginbox").css({"left": "10px"});
        }
    }
    findShoppingCartList(){
        homeActions.findShoppingCartList(this, {pageNumber: 1, pageSize: 1000});
    }
    gotoShoppingCart(){
        if(sessionStorage.getItem("userAuth") == null){
          Modal.warning({
            title: '提示：',
            content: '请登录，查看购物车。'
          });
        }else {
          browserHistory.push("/shoppingCart");
        }
    }
    goTop(){
        $(".ant-back-top").click();
    }
    onChangeContent(e){
        this.setState({content: e.target.value});
    }
    btnShowFeedback(val){
        if (val == true) {
          if(sessionStorage.getItem("userAuth") == null){
            Modal.warning({
              title: '提示：',
              content: '请登录，才能意见反馈。'
            });
          }else {
            this.setState({showFeedback: val});
          }
        }else {
          this.setState({showFeedback: val});
        }
    }
    btnAddFeedback(){
        if(this.state.content.trim() == ""){
          Modal.warning({
            title: '提示：',
            content: '请输入意见反馈。'
          });
        }else {
          homeActions.addFeedback(this, {content: this.state.content});
        }
    }
    render() {
      return (<div id="iBar" className="ibar">
          <div className="ibar_main_panel" style={{left: '0px'}}>
              <ul className="ibar_mp_center">
                  <li className="mpbtn_login" id='ibar_avatar'>
                      <a>
                          <s></s>
                      </a>
                  </li>
                  <li className="mpbtn_cart" id="ibar_cart">
                      <a>
                          <s></s>
                          <span className="text">购物车</span>
                          <span className="cart_num">{this.state.shoppingCartList.length}</span>
                      </a>
                  </li>
              </ul>
              <ul className="ibar_mp_bottom">
                  <li className="mpbtn_support">
                      <a className="btn_gotop" onClick={this.btnShowFeedback.bind(this, true)}>
                          <s></s>
                      </a>
                      <div className="mp_tooltip">
                          意见反馈
                          <s className="icon_arrow_right_black"></s>
                      </div>
                  </li>
                  <li id="gotop" className="mpbtn_gotop">
                      <a className="btn_gotop" onClick={this.goTop.bind(this)}>
                          <s></s>
                      </a>
                      <div className="mp_tooltip">
                          置顶
                          <s className="icon_arrow_right_black"></s>
                      </div>
                  </li>
              </ul>
          </div>
          <div className="ibar_login_box status_logout" id='ibar_loginbox'>
              <div className="avatar_box">
                  <div className="avatar_imgbox">
                      <img width="62" height="62" src={(this.state.imageUrl == "")?"/src/styles/images/default.png":this.state.imageUrl} />
                  </div>
                  <p style={{display: (this.state.myProfile.firstName == undefined)?"block":"none"}}>
                      你好！请
                      <a href="/login" style={{marginRight: '5px'}}>登录</a>
                      |
                      <a href="/registered">注册</a>
                  </p>
                  <p style={{display: (this.state.myProfile.firstName == undefined)?"none":"block"}}>
                      {(this.state.myProfile.firstName)?this.state.myProfile.firstName + " " + this.state.myProfile.lastName:this.state.myProfile.email}
                  </p>
              </div>
              <div className="login_btnbox">
                  <a className="login_order" target="_blank" href="javascript:void(0)" onClick={this.gotoShoppingCart.bind(this)}>我的购物车</a>
                  <a className="login_favorite" href="/myFavorites">我的收藏</a>
              </div>
              <s className="icon_arrow_white"></s>
              <a className="ibar_closebtn" title="关闭" onClick={()=>{$("#ibar_loginbox").css({"left": "0"});}}></a>
          </div>
          <div className="ibar_sub_panel">
              <a className="ibar_closebtn" title="关闭" onClick={()=>{$(".ibar_sub_panel").animate({left: "0"});}}></a>
              <span className="ibar_loading_text" style={{display: (this.state.loading)?"block":"none"}}>
                <img src="/src/styles/images/timg.gif" />
                加载数据中...
              </span>
              <div id="iBarCart" className="ibar_plugin ibar_cart_content" style={{display: 'block'}}>
                  <div className="ibar_plugin_title">
                      <span className="ibar_plugin_name">
                          购物车
                          <span className="ibar_cart_timer" style={{display: 'none'}}>已超时，请尽快结算</span>
                      </span>
                  </div>
                  <div className="ibar_plugin_content" style={{overflowY: 'auto'}}>
                      <div className="ibar_cart_group_container ibar_cart_empty" style={{display: (this.state.cartIsEmpty)?"block":"none"}}></div>

                      <ul className="ibar_cart_group_items" style={{display: (this.state.shoppingCartList.length >= 1)?"block":"none"}}>
                        {
                          this.state.shoppingCartList.map((item, index) => {
                            return (<li className="ibar_cart_item clearfix" key={index}>
                              <div className="ibar_cart_item_pic">
                                <a target="_blank" title={item.title} href="javascript:void(0)">
                                  <img src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic} />
                                  <span className="ibar_cart_item_tag">{item.brandName}</span>
                                </a>
                              </div>
                              <div className="ibar_cart_item_desc">
                                <span className="ibar_cart_item_name_wrapper">
                                  <a className="ibar_cart_item_name" target="_blank" title={item.productName} href="javascript:void(0)">{item.productName}</a>
                                </span>
                                <div className="ibar_cart_item_sku">
                                  <span title={item.productColor + " " + item.size}>型号：{item.productColor + " " + item.size}</span>
                                </div>
                                <div className="ibar_cart_item_price">
                                  <span className="unit_price">Rm{item.discountPrice}</span><span className="unit_plus"> x </span><span className="ibar_cart_item_count">{item.purchaseNum}</span>
                                </div>
                              </div>
                            </li>)
                          })
                        }
                      </ul>

                      <div className="ibar_cart_handler" style={{display: (this.state.shoppingCartList.length >= 1)?"block":"none"}}>
                          <div className="ibar_cart_handler_header clearfix">
                              <span className="ibar_cart_handler_header_left">
                                  共&nbsp;
                                  <span className="ibar_cart_total_quantity ibar_pink">{this.state.totalNum}</span>
                                  &nbsp;件商品
                              </span>
                              <span className="ibar_cart_total_price ibar_pink">Rm{this.state.totalAmount}</span>
                          </div>
                          <a className="ibar_cart_go_btn" href="/shoppingCart">去购物车查看</a>
                      </div>
                  </div>
              </div>
          </div>
          <div className="ibar_tips_box"></div>
          <div className="divFeekbook" style={{display: ((this.state.showFeedback)?"block":"none"), marginTop: "766px"}}>
            <div className="divTitle">意见反馈</div>
            <div className="divContent">
              <TextArea value={this.state.content} onChange={this.onChangeContent.bind(this)} rows={4} placeholder="请输入意见反馈" />
            </div>
            <div className="divBottom">
              <Button className="btnCancel" onClick={this.btnShowFeedback.bind(this, false)}>取消</Button>
              <Button type="primary" onClick={this.btnAddFeedback.bind(this)}>提交</Button>
            </div>
          </div>
      </div>)
    }
}
